<template>
    <div class="video">
        <div class="videoBox">
            <!-- 上传视频或图片 -->
            <span class="fieldTitle">{{ $t('common.UploadVideOrPicture') }}</span>
            <van-row class="videoList">
                <template v-for="(item, index) in fileList">
                    <van-col span="8" class="itemCol" :key="item">
                        <van-badge>
                            <template>
                <span class="item" @click="previewClicjk(item, index)">
                  <template v-if="!item.filePath.includes('video')">
                    <img :src="util.filePathToUrl(item.filePath)" alt=""/>
                  </template>
                  <template v-if="item.filePath.includes('video')">
                    <video preload="auto" loop autoplay muted>
                      <source :src="util.filePathToUrl(item.filePath)" type="video/mp4">
                    </video>
                  </template>
                </span>
                            </template>
                            <template #content>
                                <van-icon @click="delFujian(item)" name="cross" class="badge-icon"/>
                            </template>
                        </van-badge>
                    </van-col>
                </template>
                <van-col class="itemCol videoCol">
                    <van-uploader v-model="fileListArr" accept="*" :after-read="afterRead" @oversize="oversize">
                        <template #preview-cover="{ file }">
                            <span class="text">{{ $t('common.AddPhotosVideos') }}</span>
                        </template>
                    </van-uploader>
                </van-col>
            </van-row>
        </div>
        <gallery :images="galleryImages" :options="gallyOptions" :index="galleryIndex" @close="galleryIndex = null">
        </gallery>
    </div>
</template>

<script>
import VueGallery from 'vue-gallery'
import {fileUpload, delfileUpload} from "@/api/maintenance";

export default {
    name: "upLoad",
    components: {
        'gallery': VueGallery
    },

    props: ["fileListArrVal", "fileListVal"],
    // props: {
    //   fileListArr: {
    //     type: Array,
    //     default: [],
    //   },
    //    fileList: {
    //     type: Array,
    //     default: [],
    //   },
    // },

    data() {
        return {
            gallyOptions: {
                prevClass: null,
                nextClass: null,
            },
            galleryIndex: null,
            galleryImages: [],
            fileListArr: this.fileListArrVal,
            fileList: this.fileListVal,
        }
    },

    created() {

    },

    methods: {
        previewClicjk(item, index,) {
            this.galleryIndex = index
            let arr = []
            arr = this.fileList
            this.galleryImages = arr.map(val => {
                if (val.filePath.includes('video')) {
                    val.filetype = 'video/mp4'
                }
                if (val.filePath.includes('jpg')) {
                    val.filetype = 'image/jpeg'
                }
                return {
                    type: val.filetype,
                    href: this.util.filePathToUrl(val.filePath),
                }
            })
        },
        oversize() {
            console.log('超过文件大小了')
        },
        dataURLtoFileFun(dataurl, filename) {
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        },
        afterRead(file, name) {

            if (file.file.type.indexOf('video') !== -1 || file.file.type.indexOf('image') !== -1) {
                let formData = new FormData();
                formData.append("dir", 'device')
                if (file.file.type.indexOf('image') !== -1) {
                    formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));
                }
                if (file.file.type.indexOf('video') !== -1) {
                    formData.append("file", this.dataURLtoFileFun(file.content, "file.video"));
                }
                // else {
                //      formData.append("file", this.dataURLtoFileFun(file.content, "file.file"));

                //}
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }
                fileUpload(formData, config).then(res => {
                    if (res.code == 200) {
                        this.fileList.push(res.data)
                        console.log('fileList', this.fileList)
                    }
                })
            } else {
                this.$Message.error(`${this.$t('common.OnlyVideosPictures')}`)
            }
        },
        async delFujian(item) {
            // if (item.id) {
            //调用删除接口
            // const params = {
            //   id: item.id
            // }
            // const { data } = await delfileUpload(params)
            // if (data === '删除成功!') {
            //   this.fileList = this.fileList.filter(val => val.fileUrl !== item.fileUrl)
            //    const obj = this.detailObj.find(val=>val.itemId == this.$route.query.itemId)
            //    obj.attachments = obj.attachments.filter(val=>val.fileUrl !== item.fileUrl)
            // }
            // } else {
            this.fileList = this.fileList.filter(val => val.fileUrl != item.fileUrl)
            this.$emit('handelDelFujian', this.fileList);
            // }
        },


    }
}
</script>
<style scoped lang="scss">
::v-deep .blueimp-gallery-controls > .next {
    display: none;
}

::v-deep .blueimp-gallery-controls > .prev {
    display: none;
}

::v-deep .blueimp-gallery > .close {
    display: block !important;
}

.video {
    .videoBox {
        .fieldTitle {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 20, 45, 0.5);
        }

        .videoList {
            .videoCol {
                background: rgba(131, 150, 181, 0.0800);
                border-radius: 4px;

                ::v-deep .van-uploader__preview {
                    display: none;
                }

                ::v-deep .van-uploader__upload {
                    width: 96px;
                    height: 96px;
                    padding: 8px 0 8px 6px;
                    box-sizing: border-box;
                    margin: 0;

                    .van-uploader__upload-icon {
                        font-size: 30px;
                    }
                }

                .text {
                    padding-top: 20px;
                    font-size: 12px;
                    color: rgba(0, 20, 45, 0.7000);
                }
            }

            .itemCol {
                margin: 8px 8px 0 0;
                display: inline-block;
                width: 96px;
                height: 96px;

                .item {
                    display: block;
                    border-radius: 4px;
                    width: 96px;
                    height: 96px;

                    video {
                        width: 96px;
                        height: 96px;
                        object-fit: fill;
                    }

                    img {
                        width: 96px;
                        height: 96px;
                    }
                }


                ::v-deep .van-badge {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    width: 18px;
                    height: 18px;
                    background-color: #D32222;
                }
            }
        }

    }
}
</style>
